<template>
  <header class="app-header">
    <h1 class="system-name">企业内部培训系统</h1>
    <div class="logo-container" @click="handleLogoClick">
      <img src="@/assets/logo.png" alt="系统logo" class="logo-img">
    </div>
  </header>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const handleLogoClick = () => {
  const currentPath = route.path
  if (currentPath === '/login') return
  
  if (!authStore.isAuthenticated()) {
    router.push('/login')
    return
  }
  
  if (currentPath.startsWith('/teacher')) {
    router.push(`/teacher/${authStore.userId}/detail`)
  } else if (currentPath.startsWith('/student')) {
    router.push(`/student/${authStore.userId}/detail`)
  } else {
    const path = authStore.userType === 'teacher' 
      ? `/teacher/${authStore.userId}/detail`
      : `/student/${authStore.userId}/detail`
    router.push(path)
  }
}
</script>

<style scoped>
.app-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 30px;
  height: 70px;
  background-color: #409EFF;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.system-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}

.logo-container {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo-container:hover {
  transform: translateY(-50%) scale(1.1);
}

.logo-img {
  height: 40px;
  width: auto;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 15px;
  }
  
  .system-name {
    font-size: 20px;
  }
  
  .logo-container {
    right: 15px;
  }
  
  .logo-img {
    height: 32px;
  }
}
</style>